<template>
  <a-modal :visible="open" :width="860" :title="formTitle" @cancel="onClose">
    <a-form-model ref="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }" :model="form" :rules="rules">
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="项目名称" prop="projectName">
            <a-input v-model="form.projectName" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="项目经理" prop="projectManager">
            <a-select placeholder="请选择项目经理" :default-active-first-option="false" :show-arrow="false"
              :filter-option="false" show-search :not-found-content="null" v-model="form.projectManager"
              @search="handleChange">
              <a-select-option v-for="(d, index) in projectManagerOptions" :key="index" :value="d.id">{{
                d.name + '(' + d.mobile + ')'
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="设备类型" prop="eqType">
            <a-select placeholder="请选择设备类型" v-model="form.eqType">
              <a-select-option v-for="(d, index) in dict.type['eq_type']" :key="index" :value="d.value">{{ d.label
                }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="发货方式" prop="deliverWay">
            <a-select placeholder="请选择发货方式" v-model="form.deliverWay">
              <a-select-option v-for="(d, index) in dict.type['deliver_way']" :key="index" :value="d.value">{{ d.label
                }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="21" :offset="2">
          <a-table v-if="form.eqType == 2" bordered :data-source="dataSourceType" :columns="columnsType" rowKey="key"
            :pagination="false" :custom-row='(record) => {
              return {
                on: { // 事件
                  click: () => editType(record),       // 点击行
                },
              }
            }'>
            <template slot="operation" slot-scope="text, record">
              <a href="javascript:;" @click.stop="onDeleteType(record)">删除</a>
            </template>
          </a-table>
          <a-button v-if="form.eqType == 2" type="primary" class="editable-add-btn" @click="handleAddTableType">
            添加表格行
          </a-button>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" label="发货名称" prop="deliverName">
            <a-textarea v-model="form.deliverName" auto-size placeholder="请输入发货名称" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" label="发货原因" prop="deliverDesc">
            <a-textarea v-model="form.deliverDesc" placeholder="请选择" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 始发地 -->
      <a-row v-for="(sight, index) in form.sights">
        <a-col :span="12">
          <a-form-model-item :prop="'sights.' + index + '.area'" label="始发地"
            :rules="{ required: true, message: '请选择始发地', trigger: 'change' }">
            <a-cascader v-model="sight.area" :options="addressList" :field-names="{
              label: 'city',
              value: 'city',
              children: 'children',
            }" placeholder="请选择始发地" />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="始发地联系人" :prop="'sights.' + index + '.phone'" :rules="{
            required: true,
            message: '请输入联系人',
          }">
            <a-input v-model="sight.phone" placeholder="请输入联系人" />
          </a-form-model-item>
        </a-col>
        <a-icon type="plus-circle" v-if="index === 0" @click="addSight" class="add-btn" />
        <a-icon type="minus-circle" v-if="index !== 0" @click="removeSight(sight)" class="add-btn" />
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="目的地" prop="endAddrList">
            <a-cascader v-model="form.endAddrList" :options="addressList" :field-names="{
              label: 'city',
              value: 'city',
              children: 'children',
            }" placeholder="请选择目的地" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" label="详细地址及联系人" prop="endContact">
            <a-textarea v-model="form.endContact" placeholder="请选择" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="装车人员" prop="puckVehPeople">
            <!-- <a-input v-model="form.puckVehPeople" placeholder="请输入" /> -->
            <a-select placeholder="请选择装车人员" :default-active-first-option="false" :show-arrow="false"
              :filter-option="false" show-search :not-found-content="null" v-model="form.puckVehPeople"
              @search="handleChange">
              <a-select-option v-for="(d, index) in projectManagerOptions" :key="index" :value="d.id">{{
                d.name + '(' + d.mobile + ')'
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="需求车型" prop="needVehicle">
            <a-input v-model="form.needVehicle" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="发货日期" prop="deliverDate">
            <a-date-picker v-model="form.deliverDate"  show-time style="width:100%" placeholder="请选择"
              @change="(__dirname, data) => handleTime(data, 'deliverDate')" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="预计到货日期" prop="needGiveDate">
            <a-date-picker v-model="form.needGiveDate"  show-time style="width:100%" placeholder="请选择"
              @change="(__dirname, data) => handleTime(data, 'needGiveDate')" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="发货设备入库单号" prop="pushStashNo">
            <a-input v-model="form.pushStashNo" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="发货设备移库单号" prop="changeStashNo">
            <a-input v-model="form.changeStashNo" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="预估装载率" prop="estimateLoadRate">
            <a-input-number v-model="form.estimateLoadRate" :max="100" style="width:100%" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="公里数" prop="kilometre">
            <a-input-number v-model="form.kilometre" style="width:100%" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-show="form.eqType !== '0'">
        <a-col :span="12">
          <a-form-model-item label="图片" prop="dingtalkImgLinks">
            <base-upload v-model="form.dingtalkImgLinks"></base-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row v-show="form.eqType === '0'">
        <a-col :span="24">
          <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }" label="链接" prop="dingtalkImgLinks">
            <a-input v-model="form.dingtalkImgLinks" style="width:100%" placeholder="请输入" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <template slot="footer">
      <a-space>
        <a-button type="primary" :loading="submitLoading" @click="submitForm">
          保存
        </a-button>
        <a-button type="dashed" @click="cancel">
          取消
        </a-button>
      </a-space>
    </template>
    <editable-cell-type ref="editTableType" :text="recordType" @edit="handleEditType" @add="onCellChangeType" />
  </a-modal>

</template>

<script>

import baseUpload from '@/components/imgUpload'
import { handleInitiate, getDingUserList, materialAddList } from "@/api/demo";
import addressList from "@/utils/ChinaCitys.js";
import { Cascader as ACascader } from 'ant-design-vue'
import EditableCellType from './editTbleType.vue';
export default {
  name: 'CreateForm',
  props: {
  },
  components: {
    baseUpload,
    'a-cascader': ACascader, // 局部注册组件
    EditableCellType
  },
  dicts: ['deliver_way', 'eq_type'],
  data() {
    return {
      submitLoading: false,
      formTitle: '',
      // 表单参数
      form: {
        projectName: undefined,
        eqType: undefined,
        projectManager: undefined,
        deliverWay: undefined,
        deliverDesc: undefined,
        deliverName: undefined,
        endAddrList: undefined,
        endContact: undefined,
        puckVehPeople: undefined,
        deliverDate: undefined,
        needGiveDate: undefined,
        needVehicle: undefined,
        estimateLoadRate: undefined,
        pushStashNo: undefined,
        changeStashNo: undefined,
        kilometre: undefined,
        dingtalkImgLinks: undefined,
        isAbnormalSum: false,
        sights: [{ area: undefined, phone: undefined }],
      },
      open: false,
      rules: {
        projectName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
        eqType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
        projectManager: [{ required: true, message: '项目经理不能为空', trigger: 'blur' }],
        deliverWay: [{ required: true, message: '发货方式不能为空', trigger: 'blur' }],
        deliverDesc: [{ required: true, message: '发货原因不能为空', trigger: 'blur' }],
        deliverName: [{ required: true, message: '发货名称不能为空', trigger: 'blur' }],
        endAddrList: [{ required: true, message: '目的地不能为空', trigger: 'blur' }],
        puckVehPeople: [{ required: true, message: '装车人员不能为空', trigger: 'blur' }],
        deliverDate: [{ required: true, message: '发货日期不能为空', trigger: 'blur' }],
        needGiveDate: [{ required: true, message: '需求到货日期不能为空', trigger: 'blur' }],
        needVehicle: [{ required: true, message: '需求车型不能为空', trigger: 'blur' }],
        estimateLoadRate: [{ required: true, message: '预估装载率不能为空', trigger: 'blur' }],
        pushStashNo: [{ required: true, message: '发货设备入库单号不能为空', trigger: 'blur' }],
        changeStashNo: [{ required: true, message: '发货设备移库单号不能为空', trigger: 'blur' }],
        kilometre: [{ required: true, message: '公里数不能为空', trigger: 'blur' }],
        dingtalkImgLinks: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
      },
      addressList: undefined,
      projectManagerOptions: [],
      dataSourceType: [
      ],
      countType: 0,
      recordType: {},
      columnsType: [
        {
          title: '品名',
          dataIndex: 'device',
        },
        {
          title: '规格',
          dataIndex: 'size',
        },
        {
          title: '数量',
          dataIndex: 'count',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    }
  },
  filters: {
  },
  created() {
    this.addressList = addressList
  },
  computed: {
  },
  watch: {
  },
  methods: {
    handleAddTableType() {
      if (!this.statusType) {
        this.$refs.editTableType.open(1)
      }
    },
    handleEditType(value) {
      const dataSource = [...this.dataSourceType];
      this.dataSourceType = dataSource.map((item) => {
        if (item.key === this.recordType.key) {
          value.key = item.key
          return value
        } else {
          return item
        }
      })
    },
    editType(record) {
      this.recordType = record
      if (!this.statusType) {
        this.$refs.editTableType.open(2)
      }

    },
    onCellChangeType(value) {
      const { countType, dataSourceType } = this;
      let newData = value;
      newData.key = countType
      this.dataSourceType = [...dataSourceType, newData];
      this.countType = countType + 1;
    },
    removeSight(item) {
      const index = this.form.sights.indexOf(item);
      if (index !== -1) {
        this.form.sights.splice(index, 1);
      }
    },
    addSight() {
      this.form.sights.push({ area: undefined, phone: undefined })
    },
    onClose() {
      this.open = false
      this.iconVisible = false
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.iconVisible = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        projectName: undefined,
        eqType: undefined,
        projectManager: undefined,
        deliverWay: undefined,
        deliverDesc: undefined,
        deliverName: undefined,
        endAddrList: undefined,
        endContact: undefined,
        puckVehPeople: undefined,
        deliverDate: undefined,
        needGiveDate: undefined,
        needVehicle: undefined,
        estimateLoadRate: undefined,
        pushStashNo: undefined,
        changeStashNo: undefined,
        kilometre: undefined,
        dingtalkImgLinks: undefined,
        isAbnormalSum: false,
        sights: [{ area: undefined, phone: undefined }],
      }
      this.$refs.form?.clearValidate()
    },
    handleChange(value) {
      getDingUserList({ mobile: value }).then((res) => {
        this.projectManagerOptions = res.data
      })
    },
    /** 新增按钮操作 */
    handleAdd(row) {
      this.reset()
      this.open = true
      this.formTitle = '发起流程'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.$emit('select-tree')
      getMenu(row.menuId).then(response => {
        this.form = response.data
        this.open = true
        this.formTitle = '修改菜单'
      })
    },
    handleTime(data, name) {
      this.form[name] = data
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.endAddr = this.form.endAddrList.join()
          this.form.beginAddr = this.form.sights.map((item) => {
            let res = {}
            res[item.area.join()] = item.phone
            return res
          })
          // this.submitLoading = true
          console.log(this.form);
          handleInitiate(this.form).then((res) => {
            if (res.code === 200) {
              this.$message.success('发起成功')
              if (this.form.eqType == 2) {
                const query = {
                  vehicleId: res.msg,
                  type: 2,
                  materialList: this.dataSourceType
                }
                materialAddList(query)
              }
            }
          })
        } else {
          return false
        }
      })
    },
  }
}
</script>
<style lang="less">
.add-btn {
  font-size: 20px;
  color: #08c;
  margin-top: 10px;
}

// th {
//   padding: 8px !important;
// }

// td {
//   padding: 12px 8px !important;
// }

.editable-add-btn {
  margin: 10px 0;
}
</style>
